<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sjm" uri="/struts-jquery-mobile-tags"%>
<html>
	<head>
  		<meta name="HandheldFriendly" content="true" />
  		<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
  		<meta name="apple-mobile-web-app-capable" content="yes" />
  		
		<title>Directorio Orq</title>
	
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<link rel="stylesheet" href="css/styles.css"/>
  		<link rel="stylesheet" href="css/photoswipe.css"/>
  		<script src="javascript/klass.min.js"></script>
  		<script src="javascript/code.photoswipe-3.0.4.min.js"></script>
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
		<script type="text/javascript" src="javascript/mostrarInstrumentos.js"></script>
		<script type="text/javascript" src="javascript/mostrarRepertorios.js"></script>
		<script type="text/javascript">
			function llamarActionRepertorio(idRepertorio,nombre){
				var url_repertorios = "repertorio_Repertorio.action";
				document.location = url_repertorios+'?repertorio.idRepertorio='+idRepertorio+'&repertorio.nombre='+nombre;
			}
			function llamarActionObtenerRepertorio(idRepertorio){
				var url_modificar = "repertorio_obtenerRepertorio.action";
				document.location = url_modificar+"?idRepertorio="+idRepertorio;
			}
			function llamarActionCrearRepertorio(){
				var url_crearRepertorio = "repertorio_Crear.action";
				var nombreRepertorio = document.forms.agregarRepertorio.nombreRepertorio.value;
				var descripcionRepertorio = document.forms.agregarRepertorio.descripcionRepertorio.value;
				if(document.forms.agregarRepertorio.nombreRepertorio.value==""){
					alert("Ingrese un nombre para el repertorio");
					document.forms.agregarRepertorio.nombreRepertorio.focus();
					return 0;
				}else{
				document.location = url_crearRepertorio+"?repertorio.nombre="+nombreRepertorio+"&repertorio.descripcion="+descripcionRepertorio;
				alert("Se ha creado el repertorio satisfactoriamente");
				}
			}
			function llamarActionEliminarRepertorio(repertorio){
				url_eliminarRepertorio = "repertorio_EliminarRepertorio.action";
				var respuesta = confirm("Esta seguro que desea borrar este repertorio?");
				if(respuesta){
					document.location = url_eliminarRepertorio+"?idRepertorio="+repertorio;
					alert("Se ha borrado el repertorio satisfactoriamente");
				}else{
					return 0;
				}
			}
			function irAlInicio(){
				var url_inicio = "index.action";
				document.location = url_inicio;
			}
			</script>
	</head> 
	<body> 
												<!-- PAGINA PRINCIPAL -->
		<div data-role="page" id="start" data-Theme="d">
			<div data-role="content" align="center">
				<img src="images/sml-logo.png" >
				<ul data-role="listview" data-inset="true">
					<li><a href="#partituras" style="font-size:18px">Partituras</a></li>
            		<li><a href="#repertorios" style="font-size:18px">Repertorios</a></li>
					<li><a href="#" style="font-size:18px">Acerca DirectorioOrq</a></li>
				</ul>
			</div>		
		</div>
										<!-- PAGINA DE GESTION DE PARTITURAS -->
		<div data-role="page" id="partituras" data-theme="d">
			<div data-role="header" align="center" data-theme="d">
				<a href="#" data-role="button" data-icon="arrow-l" data-transition="slide" onclick="irAlInicio()" data-iconpos="notext" >Regresar</a>
					<img alt="" src="images/sml-logo.png">
				<a href="#" data-role="button" data-icon="home" data-transition="slide" onclick="irAlInicio()" data-iconpos="notext" >Inicio</a>				
			</div>
			
			<div data-role="content" align="center">

				<h2>Buscar partituras</h2>
				<form id="buscar" method="post" action="partitura_Lista.action">
					<fieldset>
	          			<select name="familia" id="familia">
	         				<option value="-1">Seleccione la Familia</option>
	          			</select> 
	          			        
	          			<select name="instrumento" id="instrumento">
	          				<option value="-1">Seleccione el Instrumento</option>
	          			</select>      
	        			
			          	<select name="autor" id="autor">
			          		<option value="-1">Seleccione el Autor</option>
			          	</select>
	        			<br>
	        		</fieldset>
	     				<button data-icon="search" type="submit" data-inline="true">Buscar</button>
				</form>
			</div>		
		</div>
										
										<!-- PAGINAS DE GESTION DE REPERTORIOS -->
		<div data-role="page" id="repertorios" data-theme="d">
			<div data-role="header" align="center" data-theme="d">
				<a href="#" data-role="button" data-icon="arrow-l" data-transition="slide" onclick="irAlInicio()" data-iconpos="notext" >Regresar</a>
					<img alt="" src="images/sml-logo.png">
				<a href="#" data-role="button" data-icon="home" data-transition="slide" onclick="irAlInicio()" data-iconpos="notext" >Inicio</a>				
			</div>
			
			<div data-role="content" align="center">
			<h2>Repertorios</h2><br>
					<ul id="repertorio" data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true" data-filter="true" data-filter-placeholder="Filtro de Busqueda..." >
					</ul>
			</div>
			<div data-role="footer" class="ui-bar" data-position="fixed" data-theme="d" align="center">
				<div data-role="controlgroup" data-type="horizontal">
					<a href="#crearRepertorio" data-role="button" data-icon="plus">Crear</a>
					<a href="#eliminarRepertorio" data-role="button" data-icon="delete">Eliminar</a>
				</div>										
			</div>		
		</div>
		
		<div data-role="page" id="crearRepertorio" data-theme="d">
			<div data-role="header" align="center" data-theme="d">
				<a href="#" data-role="button" data-icon="arrow-l" data-transition="slide" data-rel="back" data-iconpos="notext" >Regresar</a>
					<img alt="" src="images/sml-logo.png">
				<a href="#" data-role="button" data-icon="home" data-transition="slide" onclick="irAlInicio()" data-iconpos="notext" >Inicio</a>				
			</div>
			
			<div data-role="content" align="center">
				<h2>Repertorios</h2><br>
				<form id="agregarRepertorio">
						<fieldset>
		    					<label for="nombre">Nombre del repertorio:</label>
		    					<input type="text" name="nombreRepertorio" id="nombreRepertorio" data-inset="true"/>
							
								<label for="descripcion">Descripcion:</label>
								<textarea name="descripcionRepertorio" id="descripcionRepertorio"></textarea>
						</fieldset>
						<button type="button" data-inline="true" data-icon="check" onclick="llamarActionCrearRepertorio()">Crear</button>							
					</form>
			</div>	
		</div>
		
		<div data-role="page" id="eliminarRepertorio" data-theme="d">
			<div data-role="header" align="center" data-theme="d">
				<a href="#" data-role="button" data-icon="arrow-l" data-transition="slide" data-rel="back" data-iconpos="notext" >Regresar</a>
					<img alt="" src="images/sml-logo.png">
				<a href="#" data-role="button" data-icon="home" data-transition="slide" onclick="irAlInicio()" data-iconpos="notext" >Inicio</a>				
			</div>
			
			<div data-role="content" align="center">
				<h2>Seleccione el Repertorio que desea eliminar</h2><br>
					<ul id="eliminarRepertorios" data-role="listview" data-split-icon="minus" data-split-theme="b" data-inset="true" data-filter="true" data-filter-placeholder="Filtro de Busqueda..." >
					</ul>
			</div>	
		</div>
	</body>
</html>